import TableRender from '@/render/TableRender'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import { Col, Row, TabPane, Tabs } from 'ant-design-vue'
import toNative from '@/utils/toNative'
import Drawer from '@/components/drawer/Index'
import type { CompanyInfoDto, CompanyProductInfoDto, PayWageInfoDto, RechargeDto } from '@/api/company/types'
import DetailData from './DetailData'
import type { InsuranceMaterialsFileDto, LongInsuranceCaseListDto, PeriodInsuranceMaterialsDto, ReportCaseResultDto } from '@/api/insurance/period/types'
import BasicInfoPeriod from './BasicInfoPeriod'
import BasicInfoDaily from './BasicInfoDaily'
import CaseProgress from './CaseProgress'
import SetMaterial from './SetMaterial'
import { getPeriodInsuranceMaterials } from '@/api/insurance/period'


export type InsuranceType = 'period' | 'daily'

@Component
export class DrawerPaywageDetail extends TableRender {
    @Prop({ default: false }) show!: boolean
    @Prop() companyId!: number
    @Prop() claimData!: LongInsuranceCaseListDto<ReportCaseResultDto>
    @Prop() type!: InsuranceType

    showDrawer = false

    activeName = 'basicInfo'

    paywageInfo = {} as PayWageInfoDto

    previewList = [] as PeriodInsuranceMaterialsDto<InsuranceMaterialsFileDto>[]

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show')
    async handleWatchShow() {
        this.showDrawer = this.show
        if (this.show) {
            this.initPeriodInsuranceMaterials()
        }
        // if (this.showDrawer) {
        //     await this.initData()
        // }
    }
    @Emit('refresh')
    handleRefresh() {}

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        console.log(5555, this.showDrawer)
        this.updateShow(this.showDrawer)
    }

    // 获取理赔材料列表
    async initPeriodInsuranceMaterials() {
        const result = await getPeriodInsuranceMaterials({
            reportCaseId: Number(this.claimData.id),
            insureCompany: this.claimData.insurCompany || this.claimData.insureCompanyType
        }).catch(() => {
            this.previewList = []
            throw new Error('error')
        })

        this.previewList = result
    }

    render() {
        return (
            <>
                <Drawer
                    v-model:show={this.showDrawer}
                    size={1000}
                    resetStyle={true}
                    closable={false}
                    destroyOnClose={true}
                    v-slots={{
                        default: () => {
                            return <>
                                <Row>
                                    <Col span={16}>
                                        <DetailData claimData={this.claimData} onClose={() =>this.showDrawer = false}/>
                                        <Tabs v-model:value={this.activeName}>
                                            <TabPane key="basicInfo" tab="基本信息">
                                                {
                                                    this.type === 'period' ?
                                                        <BasicInfoPeriod claimData={this.claimData} /> :
                                                        <BasicInfoDaily claimData={this.claimData} />
                                                }
                                            </TabPane>
                                            <TabPane key="data" tab="报案材料">
                                                <SetMaterial previewList={this.previewList} basicInfo={this.claimData} type="period" onRefresh={this.initPeriodInsuranceMaterials}/>
                                            </TabPane>
                                        </Tabs>
                                    </Col>
                                    <Col span={8}>
                                        <CaseProgress progressData={this.claimData?.reportCaseResultList ?? []} />
                                    </Col>
                                </Row>
                            </>
                        }
                    }}
                ></Drawer>
            </>
        )
    }
}

export default toNative<{claimData: LongInsuranceCaseListDto<ReportCaseResultDto>, type: InsuranceType }, { refresh: () => void }>(DrawerPaywageDetail)
